<wide-header-page [title]="title">
  <div page-content>
    <div class="padding">
      <div class="sub-title">
        <span translate *ngIf="!cardConfig.phoneRequired"
          >If you would like to connect this card to
          <span *ngIf="platformProvider.isIOS">Apple Pay</span
          ><span *ngIf="platformProvider.isAndroid">Google Pay</span
          ><span *ngIf="!platformProvider.isIOS && !platformProvider.isAndroid" translate
            >Apple Pay or Google Pay</span
          >, please provide your phone number.</span
        >
        <span translate *ngIf="cardConfig.phoneRequired"
        >Please provide a phone number<span *ngIf="cardConfig.mobilePaymentsSupported" translate> to enable two-factor authentication and 
        <span *ngIf="platformProvider.isIOS">Apple Pay</span
        ><span *ngIf="platformProvider.isAndroid">Google Pay</span
        ><span *ngIf="!platformProvider.isIOS && !platformProvider.isAndroid" translate
          >contactless payments</span
        ></span><span *ngIf="!cardConfig.mobilePaymentsSupported" translate> to activate this gift card</span>.</span
      >
      </div>
      <form [formGroup]="phoneForm">
        <div class="phone-input">
          <div
            class="phone-input__country-code"
            tappable
            (click)="onCountryCodeClick()"
            *ngIf="country"
          >
            <span class="phone-input__flag-emoji">{{country.emoji}}</span>
            +{{country.phone}} <img src="assets/img/chevron-down.svg" />
          </div>
          <ion-input
            mode="md"
            formControlName="phone"
            type="tel"
            [ionMask]="phoneMask"
            placeholder="Phone Number"
          >
          </ion-input>
        </div>
        <ion-item
          class="form__form-item form__form-toggle"
          style="padding-top: 10px"
          no-lines
        >
          <ion-label class="form__form-toggle__label">
            <span translate>By giving my phone number, I give explicit consent to BitPay to
              use it to activate this card<span translate *ngIf="cardConfig.mobilePaymentsSupported"> and connect it to Apple Pay or Google Pay</span>.</span>
            <span class="form__form__link" (click)="openPolicy()" translate>
              Privacy Notice</span
            >
          </ion-label>
          <ion-toggle formControlName="agreement" color="success"></ion-toggle>
        </ion-item>
      </form>
    </div>
    <div class="padding-bottom" style="padding-bottom: 40px">
      <button
        ion-button
        class="button-standard"
        [disabled]="phoneForm.invalid"
        (click)="next()"
      >
        <span *ngIf="!cardConfig.phoneRequired">{{'Enable' | translate}}</span>
        <span *ngIf="cardConfig.phoneRequired">{{'Continue' | translate}}</span>
      </button>
      <div tappable class="no-thanks" (click)="next(true)" *ngIf="!cardConfig.phoneRequired">{{'No thanks' | translate}}</div>
    </div>
  </div>
</wide-header-page>
